<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box{
      width:500px;
      height:5000px;
      background:lightblue;
    }
  </style>
</head>
<body>
  <div class="box">
      <input type="text" name="" id="userInput">
  </div>
  
  <script>
    // 函数防抖 用户停止输入350ms之后再发出，取决于最后一次的执行
    const debounce = (func, wait = 350) => {
      let timer = 0
      return (...args) =>{
        if(timer){
          clearTimeout(timer)
        }
        timer = setTimeout(()=>{
          func.apply(this, args)
        }, wait)
      }
    }
    let j = 1
    document.querySelector("#userInput").addEventListener('input', debounce(()=>{
      console.log(j)
      j++
    }))
    /**
     * 代码层面的优化
     *    节流、防抖----避免函数的执行次数
     * 
     */
    // 函数节流 在指定时间内只发送一次请求
    const throttle = (func, wait = 100) => {
      let lastTime = 0
      return (...args) => {
        let now = new Date().getTime()
        if(now - lastTime > wait){
          func.apply(this, args)
          lastTime = now
        }
      }
    }

    let i = 1
    window.addEventListener('scroll', throttle(()=>{
      console.log(i)
      i++
    }, 200))







    /**
     * 回流影响最大
     *    1.获取窗体，字体大小
     *    2.增加样式表
     *    3.内容变化
     *    4.class属性
     *    5.offsetWidth和offsetHeight
     *    6.fixed
     * 
     * documentFragment缓存dom
     */

    /**
     * vue相关性能优化
     *    1.v-if 和 v-show
     *      初始化性能和频繁切换性能
     *    2.和渲染无关的数据，不要放到data上
     *      data也不要嵌套多层
     *    3.nextTick修改数据当下，视图不会立即更新，同一事件循环中的所有数据变化完成之后， 
     *      统一进行视图更新
     *      this.$nextTick(function(){
     *          Dom更新
     *      })
     *    
     */
    /**
     * 解析html---解析样式---div+css融合，render-tree---
     */

    /**
     * vue的dom diff做了哪些优化
     *    1.vue中，使用defineProperty实际上能够知道所有数据的修改，然后去修改dom
     *    2.虚拟dom是什么，数据修改之后，我们通过domdiff算出那个数据修改了，然后去修改dom
     *    3.我们有，defineProperty为啥还需要虚拟dom
     * 
     * vue1.0 每个数据都有监听器，太多了影响性能，watch只到组件层，一个组件只有一个watcher
     * 组件内部使用dom diff
     * 
     * vue的domdiff和react对比，做了那些优化
     */
  </script>
</body>
</html>